<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>学生个人中心</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <style type="text/css">

        table {
            margin-left: 3cm;
            margin-top: 1cm;

            width: 18cm;
            height: 300px;


        }

        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 100%;
            color: #333333;
            border-width: medium;
            border-color: #666666;
            border-collapse: collapse;
            border-style: solid;


        }

        table.gridtable td {
            border-width: medium;
            padding: 8px;
            border-color: #666666;
            background-color: #ffffff;
            border-style: solid;
            width: 100px;

            text-align: center;


        }

        .baseMessage {

        }

        .baseMessage p {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 200%;
            margin-left: 2cm;
            margin-top: 1cm;

        }

        .baseMessage2 {
            font-weight: 800;
            width: 500px;
            height: 50px;
            font-size: 14px;
            float: left;
            margin-left: 10px;
            padding-left: 10px;

        }

        .baseMessage2 span {

            font-weight: 500;
        }


        input {

            width: 300px;


        }

        button {
            margin-left: 1190px;
            width: 95px;
            height: 45px;
            border-radius: 5px;
            color: white;
            background-color: #33CCFF;
        }
        /* 进度条 */
        /* 创建步骤数字计数器 */
        .steps {
            position: relative;
            margin-bottom: 30px;
            counter-reset: step;
            background: #fff;
            margin: 5px 0;
            overflow: hidden;
            margin-left: -39px;
        }

        /* 步骤描述 */
        .steps li {
            list-style-type: none;
            font-size: 14px;
            text-align: center;
            width: 25%;
            position: relative;
            float: left;
            height: 100px;
            line-height: 39px;
            padding: 10px 0;
        }

        /* 步骤数字 */
        .steps li:before {
            display: block;
            content: counter(step); /* 设定计数器内容 */
            counter-increment: step; /* 计数器值递增 */
            width: 50px;
            height: 50px;
            background-color: #ccc;
            line-height: 10px;
            border-radius: 50px;
            font-size: 0;
            color: #fff;
            text-align: center;
            font-weight: 600;
            margin: 0 auto 9px auto;
        }

        /* 连接线 */
        .steps li ~ li:after {
            content: '';
            width: 86%;
            height: 3px;
            background-color: #ccc;
            position: absolute;
            left: -43%;
            top: 31px;
            z-index: 0;
        }

        /* 将当前/完成步骤之前的数字及连接线变绿 */
        .steps li.active:before {
            background-color: #39C5BB;
        }

        .steps li.active2:before {
            background-color: #ccc;
        }

        .p1 {
            margin-left: 2cm;
        }

    </style>

</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- header -->

    <div th:replace="~{commons/header::header}"></div>
    <!-- left -->
    <div th:replace="~{commons/studentLeft::left}"></div>
    <!-- 内容主体区域 -->
    <div class="layui-body">
        <div style="padding:20px 0px 45px 0px;">
            <div class="baseMessage">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>创建留校申请</legend>
                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">
                        姓名:<span th:text="${getStustayList3.getStuName()}"></span>
                    </div>

                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">
                        学号:<span th:text="${getStustayList3.getStuId()}"></span>
                    </div>
                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">院系:
                        <span th:text="${getStustayList3.getStuCollege()}"></span>
                    </div>
                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">
                        专业:<span th:text="${getStustayList3.getStuMajor()}"></span>
                    </div>
                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">
                        班级:<span th:text="${getStustayList3.getStuClass()}"></span>
                    </div>

                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">
                        年级:<span th:text="${getStustayList3.getStuGrade()}"></span>
                    </div>
                    <div class="baseMessage2" th:each="getStustayList3:${getStustayList3}">
                        联系电话:
                        <span th:text="${getStustayList3.getStuPhone()}"></span>
                    </div>
                </fieldset>
                <form action="/sr_stay_insert" method="post"  autocomplete="off">

                    <div class="baseMessage2">
                        留校时间:<input type="date" name="staycomeTime" placeholder="请输入留校时间" required>
                    </div>
                    <div class="baseMessage2">

                        申请原因:<input type="text" name="staycomeReason" placeholder="请输入申请原因" required>
                    </div>
                    <input type="submit" value="提交">
                </form>
                <ul class="steps"><p class="p1">审批流程:</p>
                    <li class="active">学生提交申请</li>
                    <li class="active2">学工处审核</li>
                    <li class="active2">审核结果</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>

</body>

</html>